<!--
 * @Author: lihaogn
 * @Date: 2022-01-19 14:09:59
 * @LastEditTime: 2022-01-26 15:58:55
 * @LastEditor: lihaogn
 * @Description: 上传文件 demo
 * @FilePath: \lix-admin-vue2\src\views\develop\demo\modules\UploadComponentDemo.vue
-->
<template>
  <el-upload
    :action="uploadURL"
    :headers="{ Authorization: `Bearer ${token}` }"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    multiple
    :on-exceed="handleExceed"
    :file-list="fileList"
    :before-upload="beforeUpload"
    :on-success="handleUploadSuccess"
    :on-error="handleUploadError"
  >
    <!-- :limit="15" -->
    <el-button size="small" type="primary">点击上传</el-button>

    <div slot="tip">
      <div style="margin-top:10px;font-weight:bold;">
        点击文件进行下载 --->
      </div>
    </div>
  </el-upload>
</template>

<script>
import { mapGetters } from 'vuex'
import { deleteRequest, getRequest } from '../../../../utils/request'

export default {
  components: {},
  data() {
    return {
      uploadURL: '/api/upload',
      fileList: [
        {
          name: 'logo.png',
          url: 'img/logo.png'
        }
      ],
      needRemoveTip: true
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    // 获取文件列表
    this.getUploadList()
  },
  methods: {
    /**
     * @author: lihaogn
     * @Date: 2022-01-23 21:53:07
     * @description: 获取上传文件列表
     * @param {*}
     * @return {*}
     */
    async getUploadList() {
      const res = await getRequest('/api/uploadList')
      if (res.success) {
        this.fileList.push(...res.result)
      }
    },

    /**
     * @author: lihaogn
     * @Date: 2022-01-23 13:51:00
     * @description: 上传前操作
     * @param {*} file:Object - 要上传的文件信息
     * @return {*}
     */
    beforeUpload(file) {
      console.log('beforeUpload......')
      console.log('file', file)
      console.log('exist files', this.fileList)

      let size = file.size
      let size_mb = size / 1e6

      if (this.fileList.find(x => x.name === file.name)) {
        this.$message.warning('请勿上传同名文件！')
        this.needRemoveTip = false
        return false
      }
    },
    /**
     * @author: lihaogn
     * @Date: 2022-01-23 13:51:39
     * @description: 上传成功的回调方法
     * @param {*} response:Object - 响应信息
     * @param {*} file:Object - 上传的文件信息
     * @param {*} fileList:Array - 已上传的所有文件
     * @return {*}
     */
    handleUploadSuccess(response, file, fileList) {
      if (response.success) {
        this.$message.success(response.message)
        this.fileList = fileList
      } else {
        this.$notify.error({
          title: '上传失败',
          message: response.message
        })
      }
    },
    /**
     * @author: lihaogn
     * @Date: 2022-01-23 13:53:01
     * @description: 上传失败的回调方法
     * @param {*} err - 错误的响应信息
     * @param {*} file:Object - 上传的文件信息
     * @param {*} fileList:Array - 已上传的所有文件
     * @return {*}
     */
    handleUploadError(err, file, fileList) {
      let message = ''
      switch (err.status) {
        case 400:
          message = '上传的文件类型不支持'
          break
        case 403:
          message = '上传的文件大小超出限制'
        default:
          break
      }

      this.$notify.error({
        title: '上传失败',
        message
      })
    },

    /**
     * @author: lihaogn
     * @Date: 2022-01-23 13:53:46
     * @description: 点击文件列表的操作
     * @param {*} file:Object - 被点击的文件信息
     * @return {*}
     */
    handlePreview(file) {
      console.log('handlePreview......')
      console.log('file', file)
      if (file.status === 'success') {
        this.$emit('fileClick', file)
      }
    },
    handleExceed(files, fileList) {
      console.log('handleExceed......')
      this.$message.warning(
        `当前限制选择 15 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    /**
     * @author: lihaogn
     * @Date: 2022-01-23 13:54:28
     * @description: 移除文件列表中某个文件的前置操作
     * @param {*} file:Object - 要移除的文件的信息
     * @param {*} fileList
     * @return {*}
     */
    beforeRemove(file, fileList) {
      if (this.needRemoveTip) {
        return this.$confirm(`确定删除【${file.name}】？`, { type: 'warning' })
      }
    },
    /**
     * @author: lihaogn
     * @Date: 2022-01-23 22:24:42
     * @description: 移除文件
     * @param {*} file
     * @param {*} fileList
     * @return {*}
     */
    async handleRemove(file, fileList) {
      if (this.needRemoveTip) {
        let id = file.id
          ? file.id
          : file.response
          ? file.response.result.id
          : ''
        let res
        if (id) {
          res = await deleteRequest('/api/deleteUpload', {
            id
          })
          if (res.success) {
            this.$message.success(res.message)
          }
        } else {
          this.$message.success('删除成功')
        }
      } else {
        this.needRemoveTip = true
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
